<template>
	<el-form :model="formData" ref="formRef" :rules="formRules" label-width="8rem">
		<el-row type="flex" :gutter="10">
			<el-col :span="12">
                <el-form-item label="任务时间" prop="daterange">
                   <!-- <el-date-picker
                        v-model="formData.daterange"
                        value-format="timestamp"
                        format="yyyy-MM-dd"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
						style="width: 100%;"
                    >
                    </el-date-picker> -->
					<el-date-picker
					      v-model="formData.daterange"
					      type="datetimerange"
						  value-format="timestamp"
					      align="right"
					      start-placeholder="开始日期"
					      end-placeholder="结束日期"
						  style="width: 100%;"
					      :default-time="['12:00:00', '08:00:00']">
					    </el-date-picker>
                </el-form-item>
            </el-col>
			<!-- <el-col :span="12">
				<el-form-item label="任务名称" prop="task_name">
					<div>{{formData}}</div>
				</el-form-item>
			</el-col> -->
			<el-col :span="12">
				<el-form-item label="任务名称" prop="task_name">
					<el-input v-model="formData.task_name"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="任务类型" prop="task_type">
					<el-select v-model="formData.task_type" placeholder="请选择">
						<el-option v-for="item in typelist" :key="item.id" :label="item.title"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="任务地址" prop="task_address">
					<el-input v-model="formData.task_address"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="地图" prop="location">
					<maps :location.sync="formData.location"></maps>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="任务内容" prop="content">
					<el-input type="textarea" :rows="6"  v-model="formData.content"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="24">
			    <el-form-item label="任务封面图" prop="img">
			        <el-upload-image v-model="formData.img"></el-upload-image>
			    </el-form-item>
			</el-col>
		</el-row>
		<el-row type="flex" justify="center">
			<el-button type="primary" icon="el-icon-check" @click="onConfirm">确认</el-button>
			<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
		</el-row>
	</el-form>
</template>

<script>
	// import map from './src/components/map/index.vue'
	// import maps from '../../components/map/index.vue'
	export default {
		name: "member-search",
		props: {
			formData: {
				type: Object,
				default: () => {}
			},
		},
		components:{
			"maps": () => import("@/components/map/index.vue"),
			"el-upload-image": () => import("@/components/el-upload-image.vue"),
		},
		
		data() {
			var validateDateRange=(rule,value,callback)=>{
				console.log(value,'value')
				if (!value) {
					return callback(new Error('请选择'));
					}
					else{
					const start = value[0]
					const end = value[1]
					console.log(start,end,value)
						if (start < end) {
								callback()
						} else {
								callback(new Error('开始时间必须早于结束时间'))
						}
					}
			}
			return {
				typelist:[{id:1,title:'日任务(巡防员)'},{id:2,title:'周任务(民警)'}],//任务类型1日任务(巡防员) 2周任务(民警)
				// location:{lng:28.692306,lat:115.868225},
				formRules: {
					task_name: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}, ],
					task_type:[ {required: true,message: '请输入',trigger: 'change'}],
					task_address: [
                  {required: true,message: '请输入',trigger: 'blur'}
                ],
				location:[ {required: true,message: '请输入',trigger: 'change'}],
					content:[{required: true,message: '请输入',trigger: 'blur'}],
					img:[{required: true,message: '请选择',trigger: 'change'}],
					daterange: [
					    { validator: validateDateRange, required: true,trigger: 'change' }
					    // { validator:validateDateRange, required: true, message: '请选择日期', trigger: 'change' }
					],
				},
				
			};
		},
		methods: {
			onConfirm() {
				
				this.$refs.formRef.validate((valid) => {
					if (valid) {
						this.formData.start_time = this.formData.daterange[0]/1000
						this.formData.end_time = this.formData.daterange[1]/1000
						console.log(this.formData.daterange,'daterange',this.formData.end_time)
						// alert('submit!');
						this.$emit("search", this.formData);
						this.$parent.$emit("update:visible", false);
						this.$refs.formRef.resetFields()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			onCancel() {
				this.$parent.$emit("update:visible", false);
				this.$refs.formRef.resetFields();
			}
		}
	};
</script>